import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num,
} from '../../actions/IndexAction'
import base from "../base"
import { AtTabs, AtSearchBar,AtAvatar } from 'taro-ui'
import './index.less'
import set from "../../apis/api"
var search_page=1;
class search extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      jzlist:[],
      value:"",
    }
  }

  config = {
    navigationBarTitleText: '搜索基站',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }

  onReachBottom() {
    this.subSearch()


  }


  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  onPullDownRefresh() {
    search_page=1;
    this.setState({
      jzlist:[]
    },()=>{
      this.subSearch();
    })

    wx.stopPullDownRefresh();
  }

  componentWillUnmount() {
  }

  componentDidShow() {
    this.onPullDownRefresh()


  }

  toJZDetail(item)
  {

    Taro.navigateTo({
      url: '/pages/gypage/jz_detail?item='+JSON.stringify(item)
    })

  }

  subSearchClick()
  {
    search_page=1;
    this.setState({
      jzlist:[]
    },()=>{
      this.subSearch()
    })


  }
  subSearch() {



    wx.showLoading({title: "加载中..."})
    var databody = {
      wxid:this.props.sys_config.sets.wxid,
      access_token: this.props.gytoken.gytoken,
      I_name:this.state.value,
      page:search_page,
      // jd:this.props.location.longitude,
      // wd:this.props.location.latitude,
      // scope:set.scope
    }
    console.log(databody)
    this.wx_request(set.get_page, databody, "POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((res) => {
      console.log("search",res.data.data.data)
      if(res.data.data.data)
      {
        search_page++;
        this.setState({
          jzlist:this.state.jzlist.concat(res.data.data.data)
        })
      }

      wx.hideLoading();
      wx.stopPullDownRefresh()
    })

  }

  changeValue(val)
  {
    this.setState({
      value:val
    })
  }



  componentDidHide() {
  }

  render() {
    const {jzlist}=this.state;
    return (
      <View style={{background:"#f0f2f5",minHeight:"100vh"}}>
        <View style={{paddingTop:"10rpx"}}>
          <AtSearchBar
            value={this.state.value}
            onChange={this.changeValue.bind(this)}
            onConfirm={this.subSearchClick.bind(this)}
            onActionClick={this.subSearchClick.bind(this)}
          />
        </View>
        <View>
          <ScrollView>
            <View style={{padding:"10rpx",background:"#f0f2f5",display:"flex",flexDirection:"column"}}>
              {jzlist&&jzlist.length>0&&jzlist.map((item,key)=>{
                console.log(item)
                return(<View onClick={this.toJZDetail.bind(this,item)} key={key} style={{background:"#ffffff",margin:"10rpx",borderRadius:"20rpx",overflow:"hidden",padding:"10rpx",display:"flex"

                }}>
                  <View style={{padding:"20rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>
                    {/*<Image src={item.img?item.img.indexOf("ttp")>=0?item.img:set.domain + item.img:"../../assets/images/icon_17.png"} style={{width:"100rpx",maxHeight:"100rpx"}} mode={"widthFix"}/>*/}
                    <AtAvatar  size={"large"} circle={true} image={item.img?item.img.indexOf("ttp")>=0?item.img:set.domain + item.img:"/assets/images/icon_17.png"}></AtAvatar>

                  </View>
                  <View style={{flex:1,display:"flex",justifyContent:"center",flexDirection:"column"}}>
                    <View style={{display:"flex",justifyContent:"center",flexDirection:"column"}}>

                        <View style={{display:"flex",flex:1}}>
                          <View style={{display:"flex",flex:1,padding:"10rpx"}}>
                            <View style={{width:"120rpx",height:"36rpx",borderRadius:"18rpx",border:"1px solid #4bb33d",  alignItems: "center",
                              justifyContent: "center",display:"flex"}}>
                              <Text style={{color: "#4bb33d", fontSize: "22rpx"}}>名称</Text>
                            </View>
                            <View style={{height:"36rpx",borderRadius:"20rpx",flex:1,  alignItems: "center",
                              display:"flex",    paddingLeft: "20rpx",
                              paddingRight: "20rpx",}}>
                              <Text style={{color: "#666666", fontSize: "26rpx"}}>{item.name}</Text>
                            </View>

                          </View>
                        </View>
                        <View style={{display:"flex",flex:1}}>
                          <View style={{display:"flex",flex:1,padding:"10rpx"}}>
                            <View style={{width:"120rpx",height:"36rpx",borderRadius:"18rpx",border:"1px solid #4bb33d",  alignItems: "center",
                              justifyContent: "center",display:"flex"}}>
                              <Text style={{color: "#4bb33d", fontSize: "22rpx"}}>类型</Text>
                            </View>
                            <View style={{height:"40rpx",borderRadius:"20rpx",alignItems: "center",
                              display:"flex",    paddingLeft: "20rpx",
                              paddingRight: "20rpx",}}>
                              <Text style={{color: "#666666", fontSize: "26rpx"}}>{item.inc_type?item.inc_type:"无"}</Text>
                            </View>

                          </View>
                        </View>
                      <View style={{display:"flex",flex:1}}>
                        <View style={{display:"flex",flex:1,padding:"10rpx"}}>
                          <View style={{width:"120rpx",height:"36rpx",borderRadius:"18rpx",border:"1px solid #4bb33d",  alignItems: "center",
                            justifyContent: "center",display:"flex"}}>
                            <Text style={{color: "#4bb33d", fontSize: "22rpx"}}>状态</Text>
                          </View>
                          <View style={{height:"40rpx",borderRadius:"20rpx",alignItems: "center",
                            display:"flex",    paddingLeft: "20rpx",
                            paddingRight: "20rpx",}}>
                            {item.status==1?<Text style={{color: "#4bb33d", fontSize: "26rpx"}}>在线</Text>:
                              <Text style={{color: "#cc0033", fontSize: "26rpx"}}>断线</Text>}
                          </View>

                        </View>
                      </View>
                        <View style={{display:"flex",flex:1}}>
                          <View style={{display:"flex",flex:1,padding:"10rpx"}}>
                            <View style={{width:"120rpx",height:"36rpx",borderRadius:"18rpx",border:"1px solid #4bb33d",  alignItems: "center",
                              justifyContent: "center",display:"flex"}}>
                              <Text style={{color: "#4bb33d", fontSize: "22rpx"}}>地址</Text>
                            </View>
                            <View style={{height:"40rpx",borderRadius:"20rpx",flex:1, alignItems: "center",
                             display:"flex",    paddingLeft: "20rpx",
                              paddingRight: "20rpx",}}>
                              <Text style={{color: "#666666", fontSize: "26rpx"}}>{item.address}</Text>
                            </View>

                          </View>
                        </View>

                    </View>

                  </View>
                </View>)
              })}
            </View>
          </ScrollView>
        </View>
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel,sys_config:state.sys_config,
    gytoken:state.gytoken,
    location:state.location,
  }
}
export default connect(mapstate)(search)

